<!--
  文章展示
  article 文章类别
  articleList 文章类别对应的文章列表
-->
<template>
  <div id="articleNav">
    <el-menu :default-active="0" mode="horizontal">
      <template v-for="(articleNav,index) in article">
        <el-menu-item :key="index" :index="index" @click="setArticleList(index)">{{articleNav.name}}</el-menu-item>
      </template>
    </el-menu>
    <hr style="border-top:2px solid #89A2C9;">
    <ul class="articleList">
      <template v-for="(item,index) in articleList">
        <li :key="index">
          <div class="editor">
            <div class="editor-article-msg">{{item.articleMsg.name}}</div>
            <div style="font-size: 1.3rem">{{item.articleMsg.title}}</div>
          </div>
          <div class="share">
            <i class="el-icon-edit"></i><span>55</span>
            <i style="padding-left: 20px" class="el-icon-star-off"></i><span>99+</span>
          </div>
          <div>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ArticleNav',
  data: () => {
    return {
      article: [
        {
          name: '热门文章',
          articleList: [
            {
              articleMsg: {
                name: '聆听热门1 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            },
            {
              articleMsg: {
                name: '聆听热门2 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            }
          ]
        },
        {
          name: '推荐',
          articleList: [
            {
              articleMsg: {
                name: '聆听推荐1 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            },
            {
              articleMsg: {
                name: '聆听推荐2 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            }
          ]
        },
        {
          name: 'php',
          articleList: [
            {
              articleMsg: {
                name: '聆听php1 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            },
            {
              articleMsg: {
                name: '聆听php2 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            }
          ]
        },
        {
          name: 'ios',
          articleList: [
            {
              articleMsg: {
                name: '聆听ios1 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            },
            {
              articleMsg: {
                name: '聆听ios2 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            }
          ]
        },
        {
          name: 'python',
          articleList: [
            {
              articleMsg: {
                name: '聆听py1 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            },
            {
              articleMsg: {
                name: '聆听py2 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            }
          ]
        },
        {
          name: 'java',
          articleList: [
            {
              articleMsg: {
                name: '聆听java1 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            },
            {
              articleMsg: {
                name: '聆听java2 · 2小时前 · 成果分享',
                title: 'Python+flash+sql自学半年，板砖成功'
              },
              star: '99+',
              comment: 50
            }
          ]
        }
      ],
      articleList: null
    }
  },
  methods: {
    setArticleList: function (index) {
      this.articleList = this.article[index].articleList
    }
  },
  beforeMount: function () {
    this.articleList = this.article[0].articleList
  }
}

</script>

<style lang="scss">
  #articleNav{
    width: 1000px;
    margin: 0 auto;
    & .articleList{
      list-style: none;
      & li{
        height: 100px;
        width: 100%;
        display: table;
        border-bottom: #E6E6E6 1px solid;
        & .share{
          display: table-cell;
          vertical-align: middle;
        }
        & .editor {
          display: table-cell;
          vertical-align: middle;
          padding-left: 3.5%;
          & .editor-article-msg {
            margin-bottom: 10px;
            color: #949293;
          }
        }
      }
    }
    & .el-menu{
      margin-left: 2%;
      border-bottom: none;
      & .el-menu-item:nth-child(1){
        margin-right: 4%;
      }
    }
  }
</style>
